WebGL શેડો મેપિંગ: રીયલ-ટાઇમ રેન્ડરિંગ માટે એક વ્યાપક માર્ગદર્શિકા

3D કમ્પ્યુટર ગ્રાફિક્સની દુનિયામાં, થોડા તત્વો પડછાયાઓ કરતાં વધુ વાસ્તવિકતા અને ઇમર્સન (immersive) માં ફાળો આપે છે. તે ઑબ્જેક્ટ્સ વચ્ચેના અવકાશી સંબંધો, પ્રકાશ સ્ત્રોતોનું સ્થાન અને દ્રશ્યના એકંદર ભૂમિતિ વિશે નિર્ણાયક દ્રશ્ય સંકેતો પ્રદાન કરે છે. પડછાયાઓ વિના, 3D દુનિયા સપાટ, ડિસ્કનેક્ટેડ અને કૃત્રિમ લાગે છે. WebGL દ્વારા સંચાલિત વેબ-આધારિત 3D એપ્લિકેશન્સ માટે, ઉચ્ચ-ગુણવત્તાવાળા, રીઅલ-ટાઇમ પડછાયાઓનો અમલ કરવો એ વ્યવસાયિક-ગ્રેડ અનુભવોની નિશાની છે. આ માર્ગદર્શિકા આ પ્રાપ્ત કરવા માટેની સૌથી મૂળભૂત અને વ્યાપકપણે ઉપયોગમાં લેવાતી તકનીક પર ઊંડાણપૂર્વક ડાઇવ પ્રદાન કરે છે: શેડો મેપિંગ.

પછી ભલે તમે અનુભવી ગ્રાફિક્સ પ્રોગ્રામર હોવ અથવા ત્રીજા પરિમાણમાં પ્રવેશતા વેબ ડેવલપર હોવ, આ લેખ તમને તમારા WebGL પ્રોજેક્ટ્સમાં રીયલ-ટાઇમ પડછાયાઓને સમજવા, અમલમાં મૂકવા અને મુશ્કેલીનિવારણ કરવા માટેનું જ્ઞાન આપશે. અમે મુખ્ય સિદ્ધાંતથી લઈને વ્યવહારુ અમલીકરણ વિગતો સુધીની સફર કરીશું, સામાન્ય ખામીઓ અને આધુનિક ગ્રાફિક્સ એન્જિનમાં ઉપયોગમાં લેવાતી અદ્યતન તકનીકોનું અન્વેષણ કરીશું.

પ્રકરણ 1: શેડો મેપિંગની મૂળભૂત બાબતો

તેના હૃદયમાં, શેડો મેપિંગ એ એક ચતુર અને ભવ્ય તકનીક છે જે દ્રશ્યમાં કોઈ બિંદુ પડછાયામાં છે કે કેમ તે નિર્ધારિત કરે છે, જે એક સરળ પ્રશ્ન પૂછે છે: "શું આ બિંદુ પ્રકાશ સ્ત્રોત દ્વારા જોઈ શકાય છે?" જો જવાબ ના હોય, તો તેનો અર્થ એ છે કે કંઈક પ્રકાશને અવરોધે છે, અને બિંદુ પડછાયામાં હોવું જોઈએ. આ પ્રશ્નનો પ્રોગ્રામેટિકલી જવાબ આપવા માટે, અમે બે-પાસ રેન્ડરિંગ અભિગમનો ઉપયોગ કરીએ છીએ.

શેડો મેપિંગ શું છે? મુખ્ય ખ્યાલ

આખી તકનીક બે વાર દ્રશ્ય રેન્ડર કરવા પર આધાર રાખે છે, દરેક વખતે એક અલગ દૃષ્ટિકોણથી:

• પાસ 1: ડેપ્થ પાસ (પ્રકાશનો પરિપ્રેક્ષ્ય). પ્રથમ, અમે પ્રકાશ સ્ત્રોતની ચોક્કસ સ્થિતિ અને દિશામાંથી આખા દ્રશ્યને રેન્ડર કરીએ છીએ. જોકે, આ પાસમાં અમને રંગો કે ટેક્સચરની પરવા નથી. અમને ફક્ત ડેપ્થની જ માહિતી જોઈએ છે. રેન્ડર કરાયેલા દરેક ઑબ્જેક્ટ માટે, અમે પ્રકાશ સ્ત્રોતથી તેનું અંતર રેકોર્ડ કરીએ છીએ. ડેપ્થ મૂલ્યોનો આ સંગ્રહ એક વિશેષ ટેક્સચરમાં સંગ્રહિત છે જેને શેડો મેપ અથવા ડેપ્થ મેપ કહેવામાં આવે છે. આ નકશામાંનો દરેક પિક્સેલ પ્રકાશના દૃષ્ટિકોણથી એક વિશિષ્ટ દિશામાં નજીકના ઑબ્જેક્ટનું અંતર દર્શાવે છે.
• પાસ 2: દ્રશ્ય પાસ (કેમેરાનો પરિપ્રેક્ષ્ય). આગળ, અમે દ્રશ્યને સામાન્ય રીતે કરીએ છીએ તેમ રેન્ડર કરીએ છીએ, મુખ્ય કેમેરાના દૃષ્ટિકોણથી. પરંતુ દોરવામાં આવતા દરેક પિક્સેલ માટે, અમે વધારાની ગણતરી કરીએ છીએ. અમે 3D જગ્યામાં તે પિક્સેલની સ્થિતિ નક્કી કરીએ છીએ અને પછી પૂછીએ છીએ: "પ્રકાશ સ્ત્રોતથી આ બિંદુ કેટલું દૂર છે?" પછી અમે આ અંતરની સરખામણી અમારા શેડો મેપ (પાસ 1 થી) માં અનુરૂપ સ્થાન પર સંગ્રહિત મૂલ્ય સાથે કરીએ છીએ.

તર્ક સરળ છે:

• જો પિક્સેલનું પ્રકાશથી વર્તમાન અંતર શેડો મેપમાં સંગ્રહિત અંતર કરતાં વધારે છે, તો તેનો અર્થ એ છે કે તે જ દ્રષ્ટિની રેખા સાથે પ્રકાશની નજીક બીજો ઑબ્જેક્ટ છે. તેથી, વર્તમાન પિક્સેલ પડછાયામાં છે.
• જો પિક્સેલનું અંતર શેડો મેપમાં અંતર કરતા ઓછું અથવા તેના સમાન છે, તો તેનો અર્થ એ છે કે તેને કંઈપણ અવરોધતું નથી, અને પિક્સેલ સંપૂર્ણપણે પ્રકાશિત છે.

દ્રશ્ય સેટઅપ કરી રહ્યા છે

WebGL માં શેડો મેપિંગનો અમલ કરવા માટે, તમારે ઘણા મુખ્ય ઘટકોની જરૂર છે:

• પ્રકાશનો સ્ત્રોત: આ દિશાત્મક પ્રકાશ (સૂર્ય જેવો), બિંદુ પ્રકાશ (બલ્બ જેવો), અથવા સ્પૉટલાઇટ હોઈ શકે છે. પ્રકાશનો પ્રકાર નક્કી કરશે કે ડેપ્થ પાસ દરમિયાન કયા પ્રકારનું પ્રોજેક્શન મેટ્રિક્સનો ઉપયોગ કરવામાં આવશે.
• ફ્રેમબફર ઑબ્જેક્ટ (FBO): WebGL સામાન્ય રીતે સ્ક્રીનના ડિફૉલ્ટ ફ્રેમબફર પર રેન્ડર કરે છે. અમારું શેડો મેપ બનાવવા માટે, અમારે ઑફ-સ્ક્રીન રેન્ડર લક્ષ્યની જરૂર છે. FBO અમને સ્ક્રીનને બદલે ટેક્સચરમાં રેન્ડર કરવાની મંજૂરી આપે છે. અમારું FBO ડેપ્થ ટેક્સચર એટેચમેન્ટ સાથે ગોઠવેલું હશે.
• શેડર્સના બે સેટ: તમારે ડેપ્થ પાસ માટે એક શેડર પ્રોગ્રામ (ખૂબ જ સરળ) અને અંતિમ દ્રશ્ય પાસ માટે બીજો (જેમાં શેડો ગણતરી તર્ક હશે) ની જરૂર પડશે.
• મેટ્રિક્સ: તમારે કેમેરા માટે પ્રમાણભૂત મોડેલ, વ્યૂ અને પ્રોજેક્શન મેટ્રિક્સની જરૂર પડશે. નિર્ણાયક રીતે, તમારે પ્રકાશ સ્ત્રોત માટે પણ વ્યૂ અને પ્રોજેક્શન મેટ્રિક્સની જરૂર પડશે, જે ઘણીવાર એક જ "લાઇટ સ્પેસ મેટ્રિક્સ" માં જોડવામાં આવે છે.

પ્રકરણ 2: વિગતવાર બે-પાસ રેન્ડરિંગ પાઇપલાઇન

ચાલો બે રેન્ડરિંગ પાસને સ્ટેપ-બાય-સ્ટેપ તોડીએ, મેટ્રિક્સ અને શેડર્સની ભૂમિકાઓ પર ધ્યાન કેન્દ્રિત કરીએ.

પાસ 1: ડેપ્થ પાસ (પ્રકાશના પરિપ્રેક્ષ્યથી)

આ પાસનો ધ્યેય અમારા ડેપ્થ ટેક્સચરને વસ્તી બનાવવાનું છે. તે આ રીતે કામ કરે છે:

1. FBO ને બાંધો: ડ્રોઇંગ કરતા પહેલાં, તમે WebGL ને કેનવાસને બદલે તમારા કસ્ટમ FBO પર રેન્ડર કરવા સૂચના આપો છો.
2. વ્યુપોર્ટને ગોઠવો: તમારા શેડો મેપ ટેક્સચરના કદ સાથે મેળ ખાવા માટે વ્યુપોર્ટના પરિમાણો સેટ કરો (દા.ત., 1024x1024 પિક્સેલ્સ).
3. ડેપ્થ બફર સાફ કરો: રેન્ડર કરતા પહેલાં FBO નું ડેપ્થ બફર સાફ થયેલું છે તેની ખાતરી કરો.
4. પ્રકાશના મેટ્રિક્સ બનાવો:
   • લાઇટ વ્યૂ મેટ્રિક્સ: આ મેટ્રિક્સ વિશ્વને પ્રકાશના દૃષ્ટિકોણમાં રૂપાંતરિત કરે છે. દિશાત્મક પ્રકાશ માટે, આ સામાન્ય રીતે `lookAt` ફંક્શનથી બનાવવામાં આવે છે, જ્યાં "આંખ" એ પ્રકાશની સ્થિતિ છે અને "લક્ષ્ય" એ તે જે દિશામાં નિર્દેશ કરે છે.
   • લાઇટ પ્રોજેક્શન મેટ્રિક્સ: દિશાત્મક પ્રકાશ માટે, જેમાં સમાંતર કિરણો હોય છે, ઓર્થોગ્રાફિક પ્રોજેક્શનનો ઉપયોગ કરવામાં આવે છે. પોઇન્ટ લાઇટ્સ અથવા સ્પૉટલાઇટ માટે, પરિપ્રેક્ષ્ય પ્રોજેક્શનનો ઉપયોગ થાય છે. આ મેટ્રિક્સ અવકાશમાં વોલ્યુમ (બૉક્સ અથવા ફ્રસ્ટમ) વ્યાખ્યાયિત કરે છે જે પડછાયાઓ નાખશે.
5. ડેપ્થ શેડર પ્રોગ્રામનો ઉપયોગ કરો: આ એક ન્યૂનતમ શેડર છે. વર્ટેક્સ શેડરનું એકમાત્ર કામ એ છે કે વર્ટેક્સ પોઝિશનને પ્રકાશના દૃશ્ય અને પ્રોજેક્શન મેટ્રિક્સ દ્વારા ગુણાકાર કરવો. ફ્રેગમેન્ટ શેડર પણ સરળ છે: તે ફક્ત ફ્રેગમેન્ટનું ડેપ્થ મૂલ્ય (તેના z-કોઓર્ડિનેટ) ડેપ્થ ટેક્સચરમાં લખે છે. આધુનિક WebGL માં, તમારે ઘણીવાર કસ્ટમ ફ્રેગમેન્ટ શેડરની પણ જરૂર હોતી નથી, કારણ કે FBO ને આપમેળે ડેપ્થ બફર કેપ્ચર કરવા માટે ગોઠવી શકાય છે.
6. દ્રશ્ય રેન્ડર કરો: તમારા દ્રશ્યમાંના બધા શેડો-કાસ્ટિંગ ઑબ્જેક્ટ્સ દોરો. FBO હવે અમારું પૂર્ણ શેડો મેપ ધરાવે છે.

પાસ 2: દ્રશ્ય પાસ (કેમેરાના પરિપ્રેક્ષ્યથી)

હવે અમે અંતિમ ઇમેજ રેન્ડર કરીએ છીએ, પડછાયાઓ નક્કી કરવા માટે અમે હમણાં જ બનાવેલા શેડો મેપનો ઉપયોગ કરીએ છીએ.

1. FBO ને અનબાઈન્ડ કરો: ડિફૉલ્ટ કેનવાસ ફ્રેમબફર પર રેન્ડરિંગ પર પાછા સ્વિચ કરો.
2. વ્યુપોર્ટને ગોઠવો: વ્યુપોર્ટને કેનવાસના પરિમાણો પર પાછા સેટ કરો.
3. સ્ક્રીન સાફ કરો: કેનવાસના રંગ અને ડેપ્થ બફર સાફ કરો.
4. દ્રશ્ય શેડર પ્રોગ્રામનો ઉપયોગ કરો: અહીં જાદુ થાય છે. આ શેડર વધુ જટિલ છે.
   • વર્ટેક્સ શેડર: આ શેડરે બે વસ્તુઓ કરવી આવશ્યક છે. પ્રથમ, તે સામાન્ય પ્રમાણે કેમેરાના મોડેલ, વ્યૂ અને પ્રોજેક્શન મેટ્રિક્સનો ઉપયોગ કરીને અંતિમ વર્ટેક્સની સ્થિતિની ગણતરી કરે છે. બીજું, તેણે પાસ 1 માંથી લાઇટ સ્પેસ મેટ્રિક્સનો ઉપયોગ કરીને પ્રકાશના પરિપ્રેક્ષ્યથી વર્ટેક્સની સ્થિતિની પણ ગણતરી કરવી આવશ્યક છે. આ બીજું કોઓર્ડિનેટ ફ્રેગમેન્ટ શેડરને અલગ અલગ તરીકે પસાર થાય છે.
   • ફ્રેગમેન્ટ શેડર: આ શેડો લોજિકનો કોર છે. દરેક ફ્રેગમેન્ટ માટે:
     1. વર્ટેક્સ શેડરથી પ્રકાશની જગ્યામાં ઇન્ટરપોલેટેડ સ્થિતિ મેળવો.
     2. આ કોઓર્ડિનેટ પર પરિપ્રેક્ષ્ય વિભાજન કરો (x, y, z ને w દ્વારા વિભાજીત કરો). આ તેને નોર્મલાઇઝ્ડ ડિવાઇસ કોઓર્ડિનેટ્સ (NDC) માં રૂપાંતરિત કરે છે, જે -1 થી 1 સુધીની છે.
     3. એનડીસીને ટેક્સચર કોઓર્ડિનેટ્સમાં રૂપાંતરિત કરો (જે 0 થી 1 સુધીની છે) જેથી અમે અમારા શેડો મેપને સેમ્પલ કરી શકીએ. આ એક સરળ સ્કેલ અને બાયસ ઓપરેશન છે: `texCoord = ndc * 0.5 + 0.5;`.
     4. પાસ 1 માં બનાવેલા શેડો મેપ ટેક્સચરને સેમ્પલ કરવા માટે આ ટેક્સચર કોઓર્ડિનેટ્સનો ઉપયોગ કરો. આ અમને `depthFromShadowMap` આપે છે.
     5. પ્રકાશના પરિપ્રેક્ષ્યથી ફ્રેગમેન્ટની વર્તમાન ડેપ્થ એ રૂપાંતરિત પ્રકાશ જગ્યા કોઓર્ડિનેટનું તેનું z-ઘટક છે. ચાલો તેને `currentDepth` કહીએ.
     6. ડેપ્થની તુલના કરો: જો `currentDepth > depthFromShadowMap`, તો ફ્રેગમેન્ટ પડછાયામાં છે. અમને આર્ટિફેક્ટ ટાળવા માટે આ તપાસમાં થોડું બાયસ ઉમેરવાની જરૂર પડશે, જેને આપણે આગળ ચર્ચા કરીશું.
     7. સરખામણીના આધારે, શેડો ફેક્ટર (દા.ત., પ્રકાશિત માટે 1.0, શેડો માટે 0.3) નક્કી કરો.
     8. અંતિમ રંગ ગણતરીમાં આ શેડો ફેક્ટર લાગુ કરો (દા.ત., એમ્બિયન્ટ અને ડિફ્યુઝ લાઇટિંગ ઘટકોને શેડો ફેક્ટર દ્વારા ગુણાકાર કરો).
5. દ્રશ્ય રેન્ડર કરો: દ્રશ્યમાંના બધા ઑબ્જેક્ટ દોરો.

પ્રકરણ 3: સામાન્ય સમસ્યાઓ અને ઉકેલો

બેઝિક શેડો મેપિંગનો અમલ કરવાથી તરત જ ઘણા સામાન્ય દ્રશ્ય આર્ટિફેક્ટ્સ જાહેર થશે. તેમને સમજવું અને ઠીક કરવું એ ઉચ્ચ-ગુણવત્તાવાળા પરિણામો મેળવવા માટે નિર્ણાયક છે.

શેડો એક્ને (સ્વ-શેડોઇંગ આર્ટિફેક્ટ્સ)

સમસ્યા: તમે સપાટી પર વિચિત્ર, ખોટા દાખલા અથવા મોઇર-જેવા દાખલા જોઈ શકો છો જે સંપૂર્ણપણે પ્રકાશિત હોવા જોઈએ. આને “શેડો એક્ને” કહેવામાં આવે છે. તે એટલા માટે થાય છે કારણ કે શેડો મેપમાં સંગ્રહિત ડેપ્થ મૂલ્ય અને દ્રશ્ય પાસ દરમિયાન ગણતરી કરાયેલ ડેપ્થ મૂલ્ય એક જ સપાટી માટે છે. ફ્લોટિંગ-પોઇન્ટ અચોકસાઇ અને શેડો મેપના મર્યાદિત રિઝોલ્યુશનને કારણે, નાના દોષો ફ્રેગમેન્ટને ખોટી રીતે નક્કી કરી શકે છે કે તે પોતાને પાછળ છે, જેના પરિણામે સ્વ-શેડોઇંગ થાય છે.

ઉકેલ: ડેપ્થ બાયસ. સૌથી સરળ ઉકેલ એ સરખામણી પહેલાં `currentDepth` માં એક નાનો બાયસ દાખલ કરવાનો છે. ફ્રેગમેન્ટને વાસ્તવમાં તેના કરતા થોડું નજીક દેખાય છે, અમે તેને તેના પોતાના પડછાયામાંથી “બહાર” ધકેલીએ છીએ.

float shadow = currentDepth > depthFromShadowMap + bias ? 0.3 : 1.0;

યોગ્ય બાયસ મૂલ્ય શોધવું એ એક નાજુક સંતુલન ક્રિયા છે. ખૂબ નાનું, અને ખીલ રહે છે. ખૂબ મોટું, અને તમને આગામી સમસ્યા મળે છે.

પીટર પેનિંગ

સમસ્યા: આ આર્ટિફેક્ટ, જે પાત્રના નામ પરથી રાખવામાં આવ્યું છે જે ઉડી શકતો હતો અને તેનો પડછાયો ગુમાવ્યો હતો, તે ઑબ્જેક્ટ અને તેના પડછાયા વચ્ચે દેખાતા ગેપ તરીકે પ્રગટ થાય છે. તે ઑબ્જેક્ટને એવું લાગે છે કે તેઓ સપાટીથી તરતા હોય અથવા તે સપાટીથી ડિસ્કનેક્ટ થયેલા છે જેના પર તેઓ આરામ કરતા હોવા જોઈએ. તે ખૂબ મોટા ડેપ્થ બાયસના ઉપયોગનું સીધું પરિણામ છે.

ઉકેલ: સ્લોપ-સ્કેલ ડેપ્થ બાયસ. સતત બાયસ કરતાં વધુ મજબૂત ઉકેલ એ પ્રકાશની તુલનામાં સપાટીની ઢોળાવ પર આધારિત બાયસ બનાવવાનો છે. વધુ ઢોળાવવાળા બહુકોણ ખીલ માટે વધુ સંવેદનશીલ હોય છે અને તેને મોટા બાયસની જરૂર પડે છે. ફ્લેટર બહુકોણ ઓછા બાયસની જરૂર છે. મોટાભાગના ગ્રાફિક્સ API, જેમાં WebGL શામેલ છે, ડેપ્થ પાસ દરમિયાન આ પ્રકારના બાયસને આપમેળે લાગુ કરવાની કાર્યક્ષમતા પ્રદાન કરે છે, જે સામાન્ય રીતે ફ્રેગમેન્ટ શેડરમાં મેન્યુઅલ બાયસ કરતાં વધુ પસંદીય છે.

પરિપ્રેક્ષ્ય એલિઅસીંગ (જગ્ડ એજિસ)

સમસ્યા: તમારા પડછાયાઓની કિનારીઓ બ્લોકી, જગ્ડ અને પિક્સેલેટેડ લાગે છે. આ એલિઅસિંગનું એક સ્વરૂપ છે. તે થાય છે કારણ કે શેડો મેપનું રિઝોલ્યુશન મર્યાદિત છે. શેડો મેપમાં એક જ પિક્સેલ (અથવા ટેક્સેલ) અંતિમ દ્રશ્યમાં સપાટી પર મોટા વિસ્તારને આવરી શકે છે, ખાસ કરીને કેમેરાની નજીકની સપાટી અથવા તે ખૂણા પર જોવામાં આવે છે. રિઝોલ્યુશનમાં આ મેળ ખાતો ન હોવો એ લાક્ષણિક બ્લોકી દેખાવનું કારણ બને છે.

ઉકેલ: શેડો મેપનું રિઝોલ્યુશન વધારવું (દા.ત., 1024x1024 થી 4096x4096) મદદ કરી શકે છે, પરંતુ તે નોંધપાત્ર મેમરી અને કામગીરીની કિંમત સાથે આવે છે અને અંતર્ગત સમસ્યાને સંપૂર્ણપણે હલ કરતું નથી. વાસ્તવિક ઉકેલો વધુ અદ્યતન તકનીકોમાં રહેલા છે.

પ્રકરણ 4: અદ્યતન શેડો મેપિંગ તકનીકો

બેઝિક શેડો મેપિંગ એક પાયો પૂરો પાડે છે, પરંતુ વ્યાવસાયિક એપ્લિકેશન્સ તેની મર્યાદાઓને દૂર કરવા માટે વધુ અત્યાધુનિક અલ્ગોરિધમ્સનો ઉપયોગ કરે છે, ખાસ કરીને એલિઅસિંગ.

ટકાવારી-ક્લોઝર ફિલ્ટરિંગ (PCF)

PCF એ શેડો એજિસને સોફ્ટ કરવા અને એલિઅસિંગ ઘટાડવાની સૌથી સામાન્ય તકનીક છે. શેડો મેપમાંથી એક જ નમૂનો લેવા અને દ્વિસંગી (પડછાયામાં-કે-નહીં) નિર્ણય લેવાને બદલે, PCF લક્ષ્ય કોઓર્ડિનેટની આસપાસના વિસ્તારમાંથી બહુવિધ નમૂના લે છે.

ખ્યાલ: દરેક ફ્રેગમેન્ટ માટે, અમે શેડો મેપને માત્ર એક જ વાર નહીં, પરંતુ ફ્રેગમેન્ટના પ્રોજેક્ટેડ ટેક્સચર કોઓર્ડિનેટની આસપાસના ગ્રીડ પેટર્નમાં (દા.ત., 3x3 અથવા 5x5) નમૂના આપીએ છીએ. આમાંના દરેક નમૂના માટે, અમે ડેપ્થની તુલના કરીએ છીએ. અંતિમ શેડો મૂલ્ય એ આ બધી સરખામણીઓનો સરેરાશ છે. ઉદાહરણ તરીકે, જો 9 નમૂનામાંથી 4 પડછાયામાં છે, તો ફ્રેગમેન્ટ 4/9મા ભાગનો પડછાયો હશે, જેના પરિણામે એક સરળ પેનમ્બ્રા (પડછાયાની નરમ ધાર) થશે.

અમલીકરણ: આ સંપૂર્ણપણે ફ્રેગમેન્ટ શેડરની અંદર કરવામાં આવે છે. તેમાં એક લૂપનો સમાવેશ થાય છે જે નાના કર્નલ પર પુનરાવર્તન કરે છે, દરેક ઑફસેટ પર શેડો મેપનું સેમ્પલિંગ કરે છે અને પરિણામો એકઠા કરે છે. WebGL 2 હાર્ડવેર સપોર્ટ આપે છે (`sampler2DShadow` સાથે `texture`) જે સરખામણી અને ફિલ્ટરિંગ વધુ કાર્યક્ષમ રીતે કરી શકે છે.

લાભ: હાર્ડ, એલિઅસ્ડ એજિસને સ્મૂથ, સોફ્ટ સાથે બદલીને શેડોની ગુણવત્તામાં નાટ્યાત્મક રીતે સુધારો કરે છે.

ખર્ચ: ફ્રેગમેન્ટ દીઠ લેવામાં આવેલા નમૂનાઓની સંખ્યા સાથે કામગીરી ઘટે છે.

કેસ્કેડેડ શેડો મેપ્સ (CSM)

CSM એ ખૂબ જ મોટા દ્રશ્ય પર એક જ દિશાત્મક પ્રકાશ સ્ત્રોત (સૂર્ય જેવો) માંથી પડછાયાઓ રેન્ડર કરવા માટેનું ઉદ્યોગ-માનક સોલ્યુશન છે. તે પરિપ્રેક્ષ્ય એલિઅસિંગની સમસ્યાને સીધી રીતે સંબોધે છે.

ખ્યાલ: મુખ્ય વિચાર એ છે કે કેમેરાની નજીકના ઑબ્જેક્ટ્સને દૂરના ઑબ્જેક્ટ્સ કરતાં ખૂબ વધારે શેડો રિઝોલ્યુશનની જરૂર છે. CSM કેમેરાના વ્યૂ ફ્રસ્ટમને તેની ડેપ્થ સાથે અનેક વિભાગો અથવા "કેસ્કેડ્સ" માં વિભાજિત કરે છે. પછી દરેક કેસ્કેડ માટે એક અલગ, ઉચ્ચ-ગુણવત્તાવાળા શેડો મેપ રેન્ડર કરવામાં આવે છે. કેમેરાની સૌથી નજીકનું કેસ્કેડ વિશ્વની જગ્યાના નાના વિસ્તારને આવરી લે છે અને આમ ખૂબ જ ઉચ્ચ અસરકારક રિઝોલ્યુશન ધરાવે છે. વધુ દૂરના કેસ્કેડ્સ તે જ ટેક્સચર કદ સાથે ઉત્તરોત્તર મોટા વિસ્તારોને આવરી લે છે, જે સ્વીકાર્ય છે કારણ કે તે વિગતો પ્લેયરને ઓછી દૃશ્યમાન છે.

અમલીકરણ: આ નોંધપાત્ર રીતે વધુ જટિલ છે.

1. સીપીયુમાં, કેમેરા ફ્રસ્ટમને 2-4 કેસ્કેડ્સમાં વિભાજિત કરો.
2. દરેક કેસ્કેડ માટે, પ્રકાશ માટે ચુસ્ત-ફિટિંગ ઓર્થોગ્રાફિક પ્રોજેક્શન મેટ્રિક્સની ગણતરી કરો જે ફ્રસ્ટમના તે વિભાગને સંપૂર્ણપણે બંધ કરે છે.
3. રેન્ડરિંગ લૂપમાં, ડેપ્થ પાસ ઘણી વખત કરો - દરેક કેસ્કેડ માટે એકવાર, અલગ શેડો મેપ (અથવા ટેક્સચર એટલાસનો એક પ્રદેશ) પર રેન્ડરિંગ કરો.
4. અંતિમ દ્રશ્ય પાસ ફ્રેગમેન્ટ શેડરમાં, વર્તમાન ફ્રેગમેન્ટ કેમેરાથી તેના અંતરના આધારે કયા કેસ્કેડ સાથે સંબંધિત છે તે નક્કી કરો.
5. શેડોની ગણતરી કરવા માટે યોગ્ય કેસ્કેડના શેડો મેપને સેમ્પલ કરો.

લાભ: વિશાળ અંતર પર સતત ઉચ્ચ-રિઝોલ્યુશન શેડો પ્રદાન કરે છે, જે તેને આઉટડોર વાતાવરણ માટે યોગ્ય બનાવે છે.

વેરિયન્સ શેડો મેપ્સ (VSM)

VSM એ સોફ્ટ શેડો બનાવવા માટેની બીજી તકનીક છે, પરંતુ તે PCF થી અલગ અભિગમ અપનાવે છે.

ખ્યાલ: શેડો મેપમાં માત્ર ડેપ્થ સ્ટોર કરવાને બદલે, VSM બે મૂલ્યો સંગ્રહિત કરે છે: ડેપ્થ (પ્રથમ ક્ષણ) અને ડેપ્થ સ્ક્વેર્ડ (બીજી ક્ષણ). આ બે મૂલ્યો અમને ડેપ્થ વિતરણના તફાવતની ગણતરી કરવાની મંજૂરી આપે છે. ચેબીશેવની અસમાનતા નામના ગાણિતિક સાધનનો ઉપયોગ કરીને, અમે અંદાજ લગાવી શકીએ છીએ કે કોઈ ફ્રેગમેન્ટ પડછાયામાં છે. મુખ્ય ફાયદો એ છે કે VSM ટેક્સચરને પ્રમાણભૂત હાર્ડવેર-એક્સિલરેટેડ લીનિયર ફિલ્ટરિંગ અને મિપમેપિંગનો ઉપયોગ કરીને અસ્પષ્ટ કરી શકાય છે, જે પ્રમાણભૂત ડેપ્થ મેપ માટે ગાણિતિક રીતે અમાન્ય છે. આ નિશ્ચિત કામગીરીના ખર્ચે ખૂબ મોટી, નરમ અને સરળ શેડો પેનમ્બ્રાસ માટે પરવાનગી આપે છે.

ગેરફાયદો: VSM ની મુખ્ય નબળાઈ એ "પ્રકાશ રક્તસ્ત્રાવ" છે, જ્યાં ઓવરલેપિંગ ઑબ્જેક્ટ્સ સાથેની પરિસ્થિતિઓમાં પ્રકાશ ઑબ્જેક્ટ્સમાંથી પસાર થઈ શકે છે, કારણ કે આંકડાકીય અંદાજ તૂટી શકે છે.

પ્રકરણ 5: વ્યવહારુ અમલીકરણ ટિપ્સ અને કામગીરી

તમારું શેડો મેપ રિઝોલ્યુશન પસંદ કરી રહ્યા છીએ

તમારા શેડો મેપનું રિઝોલ્યુશન ગુણવત્તા અને કામગીરી વચ્ચે સીધું વેપાર બંધ છે. એક મોટું ટેક્સચર તીવ્ર પડછાયાઓ પ્રદાન કરે છે પરંતુ વધુ વિડિયો મેમરીનો વપરાશ કરે છે અને રેન્ડર અને સેમ્પલ કરવામાં વધુ સમય લે છે. સામાન્ય કદમાં શામેલ છે:

• 1024x1024: ઘણી એપ્લિકેશનો માટે એક સારી બેઝલાઇન.
• 2048x2048: ડેસ્કટોપ એપ્લિકેશન્સ માટે નોંધપાત્ર ગુણવત્તા સુધારો આપે છે.
• 4096x4096: ઉચ્ચ ગુણવત્તા, ઘણીવાર હીરો અસ્કયામતો અથવા મજબૂત કલિંગ સાથે એન્જિનમાં વપરાય છે.

યાદ રાખો કે મેમરી વપરાશ ચતુર્થાંશ રીતે સ્કેલ કરે છે; 4096x4096 ટેક્સચર 1024x1024 કરતા 16 ગણી વધુ મેમરીનો ઉપયોગ કરે છે.

પ્રકાશના ફ્રસ્ટમને ઑપ્ટિમાઇઝ કરી રહ્યા છીએ

તમારા શેડો મેપમાંના દરેક પિક્સેલનો મહત્તમ ઉપયોગ કરવા માટે, તે નિર્ણાયક છે કે પ્રકાશનું પ્રોજેક્શન વોલ્યુમ (તેનું ઓર્થોગ્રાફિક બૉક્સ અથવા પરિપ્રેક્ષ્ય ફ્રસ્ટમ) દ્રશ્યના તત્વો સાથે શક્ય તેટલું ચુસ્તપણે ફિટ કરવામાં આવે કે જેને પડછાયાઓની જરૂર હોય. દિશાત્મક પ્રકાશ માટે, આનો અર્થ એ છે કે તેના ઓર્થોગ્રાફિક પ્રોજેક્શનને કેમેરાના ફ્રસ્ટમના ફક્ત દૃશ્યમાન ભાગને બંધ કરવા માટે ફિટ કરવું. શેડો મેપમાં કોઈપણ બગાડ થયેલ જગ્યા એ બગાડ થયેલ રિઝોલ્યુશન છે.

WebGL એક્સટેન્શન્સ અને વર્ઝન

WebGL 1 વિ. WebGL 2: જ્યારે શેડો મેપિંગ WebGL 1 માં શક્ય છે, તે WebGL 2 માં ખૂબ સરળ અને વધુ કાર્યક્ષમ છે. WebGL 1 ને ડેપ્થ ટેક્સચર બનાવવા માટે `WEBGL_depth_texture` એક્સટેન્શનની જરૂર છે. WebGL 2 માં આ કાર્યક્ષમતા બિલ્ટ-ઇન છે. વધુમાં, WebGL 2 શેડો સેમ્પલર્સ (`sampler2DShadow`) ની ઍક્સેસ પ્રદાન કરે છે, જે હાર્ડવેર-એક્સિલરેટેડ PCF કરી શકે છે, જે શેડરમાં મેન્યુઅલ PCF લૂપ્સ પર નોંધપાત્ર કામગીરીનો વધારો આપે છે.

શેડોનું ડિબગીંગ

શેડોઝને ડિબગ કરવું કુખ્યાત રીતે મુશ્કેલ હોઈ શકે છે. સૌથી વધુ ઉપયોગી તકનીક એ શેડો મેપને વિઝ્યુઅલાઈઝ કરવી છે. ચોક્કસ પ્રકાશ સ્ત્રોતમાંથી ડેપ્થ ટેક્સચરને સીધા સ્ક્રીન પરના ક્વાડ પર રેન્ડર કરવા માટે તમારી એપ્લિકેશનને અસ્થાયી રૂપે સંશોધિત કરો. આ તમને બરાબર જોવાની મંજૂરી આપે છે કે પ્રકાશ શું "જુએ છે". આ તમારા પ્રકાશના મેટ્રિક્સ, ફ્રસ્ટમ કલિંગ અથવા ડેપ્થ પાસ દરમિયાન ઑબ્જેક્ટ રેન્ડરિંગ સાથેની સમસ્યાઓ તાત્કાલિક જાહેર કરી શકે છે.

નિષ્કર્ષ

રીયલ-ટાઇમ શેડો મેપિંગ આધુનિક 3D ગ્રાફિક્સનો એક આધારસ્તંભ છે, જે સપાટ, નિર્જીવ દ્રશ્યોને વિશ્વાસપાત્ર અને ગતિશીલ દુનિયામાં પરિવર્તિત કરે છે. જ્યારે પ્રકાશના પરિપ્રેક્ષ્યથી રેન્ડરિંગનો ખ્યાલ સરળ છે, ત્યારે ઉચ્ચ-ગુણવત્તાવાળા, આર્ટિફેક્ટ-મુક્ત પરિણામો પ્રાપ્ત કરવા માટે બે-પાસ પાઇપલાઇનથી ડેપ્થ બાયસ અને એલિઅસિંગની ઝીણવટ સુધી, અંતર્ગત મિકેનિક્સની ઊંડી સમજણની જરૂર છે.

બેઝિક અમલીકરણથી શરૂ કરીને, તમે ધીમે ધીમે શેડો એક્ને અને જગ્ડ એજિસ જેવા સામાન્ય આર્ટિફેક્ટ્સને સંબોધિત કરી શકો છો. ત્યાંથી, તમે સોફ્ટ શેડો માટે PCF અથવા મોટા પાયે વાતાવરણ માટે કેસ્કેડેડ શેડો મેપ્સ જેવી અદ્યતન તકનીકો સાથે તમારા દ્રશ્યોને એલિવેટ કરી શકો છો. શેડો રેન્ડરિંગમાંની સફર એ કલા અને વિજ્ઞાનના મિશ્રણનું સંપૂર્ણ ઉદાહરણ છે જે કમ્પ્યુટર ગ્રાફિક્સને આટલું આકર્ષક બનાવે છે. અમે તમને આ તકનીકો સાથે પ્રયોગ કરવા, તેમની સીમાઓને આગળ ધપાવવા અને તમારા WebGL પ્રોજેક્ટ્સમાં વાસ્તવિકતાનું નવું સ્તર લાવવા પ્રોત્સાહિત કરીએ છીએ.